<template>
  <div class="app-container">
    <div class="customContainer towSearchHeader">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <span style="color: #888;">收货方类型：</span>
          <el-select filterable placeholder="选择收货方类型" v-model="formInline.receive_type">
            <el-option v-for="item in type_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;" v-if="formInline.receive_type!=0">收货方：</span>
          <el-select style="width:300px" filterable placeholder="选择门店" v-model="storeId" v-if="formInline.receive_type===1">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select filterable v-model="houseId" v-if="formInline.receive_type===2">
            <el-option v-for="item in house_list" :key="item.house_id" :label="item.house_name" :value="item.house_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id" width="80"></el-table-column>
        <el-table-column align="center" label="礼品名称" prop="gift_name" width="200"></el-table-column>
        <el-table-column align="center" label="进货价" prop="end_money_sell" width="90"></el-table-column>
        <el-table-column align="center" label="采购数量" prop="order_num" width="90"></el-table-column>
        <el-table-column align="center" label="到货数量" prop="arrive_num" width="90"></el-table-column>
        <el-table-column align="center" label="欠货数量" prop="owe_num" width="90"></el-table-column>
        <el-table-column align="center" label="欠货金额" prop="owe_money" width="95"></el-table-column>
        <el-table-column align="center" label="门店" prop="store_name"></el-table-column>
        <el-table-column align="center" label="合并单号" prop="merge_no" width="130"></el-table-column>
        <el-table-column align="center" label="采购单号" prop="purchase_no" width="130"></el-table-column>
        <el-table-column align="center" label="发货信息" prop="send_remark"></el-table-column>
      </el-table>
      <el-table style="margin-top:5px" highlight-current-row :data="totalList" :show-header="false" border size="small">
        <el-table-column align="center" prop="name" width="420"></el-table-column>
        <el-table-column align="center" label="采购数量" prop="order_num" width="90"></el-table-column>
        <el-table-column align="center" label="到货数量" prop="arrive_num" width="90"></el-table-column>
        <el-table-column align="center" label="欠货数量" prop="owe_num" width="90"></el-table-column>
        <el-table-column align="center" label="欠货金额" prop="owe_money" width="95"></el-table-column>
        <el-table-column align="center"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, getPage, getStoreList, getHouse } from '@/api/report/supOGItem';
export default {
  data() {
    return {
      houseId: '',
      storeId: '',
      house_list: [],
      list: [],
      listLoading: false,
      totalList: [{ name: '合计', order_num: '', arrive_num: '', owe_num: '', owe_money: '' }],
      type_list: [
        { id: 0, name: '全部' },
        { id: 1, name: '门店' },
        { id: 2, name: '中央仓' }
      ],
      storeList: [],
      totalDataNumber: 1,
      currentPage: 1,
      formInline: {
        datetime: '',
        supplier_id: '',
        receive_id: '0',
        receive_type: 0
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$route.params.routerflag) {
        vm.formInline.supplier_id = vm.$route.params.id;
        vm.formInline.datetime = vm.$route.params.time;
        // vm.formInline.store_id = '0';
        vm.getStore();
        vm.get_house();
      }
    });
  },
  methods: {
    get_house() {
      getHouse({}).then(res => {
        this.house_list = res;
        if (this.house_list.length > 0) {
          this.houseId = this.house_list[0].house_id;
        }
      });
    },
    getStore() {
      getStoreList({ category_id: 645 }).then(response => {
        if (response.length > 1) {
          response.unshift({ id: '', name: '全部' });
        }
        this.storeList = response;
        this.storeId = this.storeList[0].id;
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      this.fetchData();
    },
    getData(data) {
      data.forEach(val => {
        val.owe_num = val.order_num - val.arrive_num;
        val.owe_money = ((val.end_money_sell * val.owe_num) / 100).toFixed(2);
        val.end_money_sell = (val.end_money_sell / 100).toFixed(2);
      });
      this.list = data;
      this.listLoading = false;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.list = [];
      if (this.formInline.receive_type === 0) {
        this.formInline.receive_id = '0';
      } else if (this.formInline.receive_type === 1) {
        this.formInline.receive_id = this.storeId;
      } else {
        this.formInline.receive_id = this.houseId;
      }
      getPage(this.formInline)
        .then(response => {
          if (response.code == 1) {
            let total_data = response.data;
            this.totalList[0].owe_money = (total_data.owe_money / 100).toFixed(2);
            this.totalList[0].order_num = total_data.order_num;
            this.totalList[0].arrive_num = total_data.arrive_num;
            this.totalList[0].owe_num = total_data.owe_num;
            this.totalDataNumber = total_data.page * 20;
            if (this.totalDataNumber <= 0) {
              this.listLoading = false;
              return;
            }
            getList(this.formInline).then(res => {
              if (res.code == 1) {
                this.getData(res.data);
              }
            });
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.list = [];
      getList(this.formInline, val).then(res => {
        this.getData(res.data);
        this.listLoading = false;
      });
    }
  }
};
</script>